<template>
    <div class="person">

        <!-- 不需要写xxx.value,会自动+ -->
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">年龄+1</button>
        <button @click="showTel">点我查看联系方式</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref } from 'vue';

// 添加ref将其包裹,让其拥有响应式.也就是数据会变动了.而不是死的
    let name = ref("zhang san")
    let age = ref(18)
    let tel = "135555555"

function changeName() {
        // 在函数中,要让其赋值或者变化的,要添加上value否则不会给value数值进行赋值...
        name.value="sdsadas"
    }
    function changeAge() {
        age.value+=1
    }
    function showTel() {
        alert(tel)
    }
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
